<template>
  <div class="u-p-20">
    <el-form :inline="true" size="small">
      <el-form-item label="时间筛选">
        <el-date-picker
          type="daterange"
          v-model="dtrange"
          align="left"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          @change="handleDt"
        ></el-date-picker>
      </el-form-item>
    </el-form>

    <div class="u-mt-30">
      <div class="common-title">
        <div class="line"></div>
        <div class="txt">关键指标详解</div>
      </div>
      <el-tabs v-model="activeTab" type="card" class="u-mt-20">
        <el-tab-pane label="访问次数" name="pv">
          <div id="chart-pv"></div>
        </el-tab-pane>
        <el-tab-pane label="访问人数" name="uv">
          <div id="chart-uv"></div>
        </el-tab-pane>
        <el-tab-pane label="打开次数" name="vv">
          <div id="chart-vv"></div>
        </el-tab-pane>
        <el-tab-pane label="独立IP数" name="iv">
          <div id="chart-iv"></div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div class="u-mt-45">
      <div class="common-title">
        <div class="line"></div>
        <div class="txt">详细数据</div>
      </div>
      <el-table :data="chartData" class="u-mt-20" border>
        <el-table-column label="机型" prop="machine"></el-table-column>
        <el-table-column label="访问次数" prop="pv"></el-table-column>
        <el-table-column label="访问人数" prop="uv"></el-table-column>
        <el-table-column label="打开次数" prop="vv"></el-table-column>
        <el-table-column label="独立IP数" prop="iv"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { isEmpty } from "@/libs/util";
import analysisUser from "@/mixins/analysis-user";
import G2 from "@antv/g2";

export default {
  name: "UserMachine",
  mixins: [analysisUser],
  data() {
    return {
      apiName: "userMachine",
      activeTab: "pv",
      chart: {
        pv: null,
        uv: null,
        vv: null,
        iv: null,
      },
    };
  },
  methods: {
    initChart(name, alias, field) {
      if (!isEmpty(this.chart[this.activeTab])) {
        this.updateChart(name, alias, field);
        return;
      }
      this.chart[name] = new G2.Chart({
        container: "chart-" + name,
        forceFit: true,
        height: 1200,
        padding: [20, 60, 40, 260],
      });
      let sourceConfig =
        '{"' +
        field +
        '":{"min":0, "type":"linear","tickCount":5, "nice": true, "alias": "' +
        alias +
        '"}}';
          let temp_data =this.chartData.concat();
      this.chart[name].source(temp_data.reverse(), JSON.parse(sourceConfig));
      this.chart[name].axis("date", {
        label: {
          offset: 20,
        },
      });
      this.chart[name].coord().transpose();
      this.chart[name].interval().position("machine*" + field);
      this.chart[name].render();
    },
    updateChart(name, alias, field) {
      let sourceConfig =
        '{"' +
        field +
        '":{"min":0, "type":"linear","tickCount":5, "nice": true, "alias": "' +
        alias +
        '"}}';
         let temp_data =this.chartData.concat();
      this.chart[name].changeData(temp_data.reverse(), JSON.parse(sourceConfig));
    },
    afterGetData() {
      this.activeTab = "pv";
      this.chartData.forEach((item) => {
        item.machine = unescape(item.machine);
      });
      this.setChart();
    },
    setChart() {
      switch (this.activeTab) {
        case "pv": {
          this.initChart("pv", "访问次数", "pv");
          break;
        }
        case "uv": {
          this.initChart("uv", "访问人数", "uv");
          break;
        }
        case "vv": {
          this.initChart("vv", "打开次数", "vv");
          break;
        }
        case "iv": {
          this.initChart("iv", "独立IP数", "iv");
          break;
        }
      }
    },
  },
  watch: {
    activeTab() {
      this.$nextTick(() => {
        this.setChart();
      });
    },
  },
};
</script>